<template>
    <div class="all">
    <h1>电影详情页</h1>
    <p>电影名称：{{ movie.name }}</p>
    <p>导演：{{ movie.director }}</p>
    <div class="top">
      <!-- 主打歌 -->
      <div class="left">
        <div class="leftLeft">zhuzhu111</div>
        
        <div class="leftRight">44444444</div>
      </div>
      <div class="right">
        <div class="rightRight">详情lalala</div>
        <div class="rightLeft">介绍111111</div>
      </div>
      
    </div>
    <div class="middle" style="background-color: red;width: 100%; height: 200px;display: flex;position: relative;">
      <div class="middleLeft" style="position: relative;">2222222
        <div style="float: left;position: absolute; display: flex;">
          <div v-for="(item, index) in lists" :key="index">
            <div style="width: 40px; height: 50px;margin: 5px; "></div>
          </div>
        </div>
      </div>
      <div class="" style="position: relative;left: 100px;">1111</div>
      <div class="" style="float: right; position:absolute;right: 10px;">3333
        <div>6666</div>
        <div style="position: relative;right: 20px;" >6666
          <div>6666</div>
        </div>
        
      </div>
      <div class="middleLeft" style="">4444</div>
      
    </div>
    <div class="bottom">
      <div class="bottomLeft">
        <div class="bottomLeftUp">
          bottomLeftUp
        </div>
        <div class="bottomLeftDown">
          bottomLeftDown
        </div>
      </div>
      <div class="bottomRight">
        bottomRight
        
      </div>
      
      
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      movie: {
        name: '复仇者联盟',
        director: '乔·罗素11'
      },
      lists: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Runoob' }
    ],
    colors: [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7'
    ]
    }
  }
  // computed: {
  //   // 计算属性生成随机颜色
  //   randomColor() {
  //     // 从颜色列表中随机选择一个颜色
  //     const randomIndex = Math.floor(Math.random() * this.colors.length);
  //     return this.colors[randomIndex];
  //   }
  // },
}
</script>
<style>
.all {
  width: 100%;
  height: 1000px;
}
  .top {
    height: 100px;
    width: 100%;
    /* border: 10px solid green; */
    /* padding: 50px; */
    /* margin: auto; */
    background-color: orange;
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .left {
    background-color: purple;
    
    /* border: 10px solid green;
    padding: 10px; */
    width: 40%;
    display: flex;
  }

  .leftLeft {
    margin-left: 20px;
    color: white;
  }
  .leftRight {
    /* background-color: blue; */
    margin-left: 30px;
    /* left: 30px; */
    max-width: 40px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right {
    width: 40%;
    display: flex;
    flex-direction: row-reverse;
    /* justify-content: end; */
    background-color: blue;
    margin-left: auto;
    margin-right: 10px;
  }

  .rightRight {
    background-color: red;
    /* margin-left: 20px; */
    /* margin-left: 20px; */
    /* float: right; */
  }
  .rightLeft {
    background-color: red;
    margin-right: 20px;
  }

  .bottom {
    position: fixed;
    left: 0px;
    bottom: 20px;
    width: 100%;
    height: 50px;
    background-color: orange;
    display: flex;
    align-items: center;
    /* justify-content: center; */
  }
  
  .bottomLeft {
    margin-left: 20px;
    /* width: 40%; */
  }
  .bottomLeftUp {
    background-color: blue;
    color: white;
    text-align: left;
  }
  .bottomLeftDown {
    background-color: blue;
    color: yellow;
  }

  /* .bottomMiddle {
    position: absolute;
    color: white;
    /* width: 20%; */
    /* left: 50%;
    top: 50%;
    width: 100px;
    height: 100px; */
    /* background-color: yellow; */
  /* } */ 
  .bottomRight {
    color: white;
    margin-left: auto;
    margin-right: 20px;
  }
</style>